<script setup lang="ts">
// FIXED: 这种写法是不用ts的写法 咱们是ts项目 因此得换个方式写
// defineProps({
// 	// filter: 类型切记大驼峰VUE定的 如果ts小写
// 	// filter: Boolean
// 	filter: {
// 		type: Boolean,
// 		default: true
// 	}
// 	// data: {
// 	// 	type: Array,
// 	// 	default: [],
// 	// }
// })

interface Props {
	filter?: boolean
}
withDefaults(defineProps<Props>(), {
	filter: true
})
</script>

<template>
	<section class="qfBox">
		<!-- 筛选区域 -->
		<section v-if="filter" class="qfFilterBox"><slot name="filter"></slot></section>
		<!-- 筛选区域 -->

		<!-- 表格区域 -->
		<section class="qfTableBox"><slot></slot></section>
		<!-- 表格区域 -->
	</section>
</template>

<style lang="scss" scoped>
.qfBox {
	height: 100%;
	display: flex;
	flex-direction: column;

	.qfFilterBox,
	.qfTableBox {
		background-color: #fff;
		border-radius: 4px;
		box-shadow: 0 0 12px rgb(0 0 0 / 5%);
	}
	.qfFilterBox {
		padding: 16px 16px 0;
		margin-bottom: 16px;
	}
	.qfTableBox {
		flex: 1;
		overflow-x: hidden;
		overflow-y: scroll;
		padding: 16px;
		// 按钮控件 批量删除、添加
		// 表格 flex 1
		// 分页
		display: flex;
		flex-direction: column;

		// .el-table {
		// 	flex: 1; // 表格y轴滚动的秘密 =》 冻结表头 (el-table固定高度就可以固定表头)
		// }
	}
}
</style>
